<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	*{margin:0;padding:0;}
	ul{list-style:none;}
	a{text-decoration: none;}
	#d1{width:730px;height:454px;
		margin:0 auto;
		position:relative;
	}
	img{width:730px;height:454px;
		vertical-align:bottom;
	}
	#pic-list li{
		position:absolute;
		left:0;
		top:0;
		opacity:0;
		filter:alpha(opacity=0);
	}
	#pic-list .pic-pic{opacity:1;
		filter:alpha(opacity=100);
	}
	#btn-list{position:absolute;
		width:100%;bottom:10px;
		text-align:center;
		
	}
    #btn-list li{display:inline-block;
		margin:0 4px;
		width:18px;height:18px;
		background:#3e3e3e;
		border-radius:50%;
		text-align:center;
		line-heigth:18px;
		cursor:pointer;
		color:#fff;
	}
	#btn-list .btn-num{color:#b61b1f;}
	
	#box{display:none;
		
	}
	#box a{position: absolute;
			top: 50%;
			margin-top: -31px;
			width: 28px;
			height: 62px;
			text-align: center;
			line-height: 62px;
			color: #fff;
			font-size: 24px;
			background: rgba(0, 0, 0, .2);
	}
	#box-right{right:0;}
</style>
<script src="jQuery.js"></script>
<script>
	(function ($){
		$(function (){
			var
					iCurIndex = 0,
					timer = null,
					timer;
			//box移入移出显示左右按钮
			$("#d1").hover(function(){
				$("#box").css("display","block");
				clearInterval(timer);
			},function(){
				$("#box").css("display","none");
				automove();
				})
			
			//当鼠标划过下标数字图片移动
			$("#btn-list").on("mouseover","li",function(){
				//console.log($(this).index());//获取下标成功
				var iIndex=$(this).index();
				iCurIndex=iIndex;
				//所有图片透明度为0，即隐藏。
				 move();
			
			})
			
			
			
			//点击出现的按钮图片运动、、往左
			$("#box-left").click(function(){
				iCurIndex--;
				if(iCurIndex<0){
					iCurIndex = $('#btn-list li').length -1;
				}
			     move();
			})
			
			//点击出现的按钮图片运动、、往右
			$("#box-right").click(function(){
				iCurIndex++;
				if(iCurIndex >= $('#btn-list li').length){
					
					iCurIndex = 0;
				}
			    move();
			})
		
		//运行函数、、作用是将当前的图片显示而隐藏其他但不会持续执行
		function move(){
			$("#pic-list li").stop().animate({
					opacity:0
				}).eq(iCurIndex).stop().animate({
					opacity:1
				})
				$("#btn-list li").removeClass("btn-num").eq(iCurIndex).addClass("btn-num");
		
		}
		//自动函数，即定时调用。
		automove();
		function automove(){
			timer=setInterval(function(){
				//
				iCurIndex++;
					if(iCurIndex >= $('#btn-list li').length){
						
						iCurIndex = 0;
					}
					move();
			},3000);
		}
		
		
		});
	
	
	
	
	})(jQuery);

</script>
</head>

<body>
	<div id="d1">
    	<ul id="pic-list">
        	<li class="pic-pic"><a href="#"><img src="img/1.jpg"/></a></li>
            <li><a href="#"><img src="img/2.jpg"/></a></li>
            <li><a href="#"><img src="img/3.jpg"/></a></li>
            <li><a href="#"><img src="img/4.jpg"/></a></li>
            <li><a href="#"><img src="img/5.jpg"/></a></li>
            <li><a href="#"><img src="img/6.jpg"/></a></li>
        </ul>
        <ul id="btn-list">
        	<li class="btn-num">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    	<div id="box">
        	<a href="javascript:;" id="box-left"><</a>
            <a href="javascript:;" id="box-right">></a>
        </div>
    
    
    </div>
</body>
</html>
